<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
        DOM，文档对象模型
        DOM就是通过js操作网页的

        文档：
            文档表示的就是整个HTML网页文档
        对象：
            将网页的每一个部分都转换为对象
        模型：
            使用模型来表示对象之间的关系，方便我们获取对象

        节点(node)
            网页中的每一个部分都是一个节点
        节点分为4类：

            文档节点：整个html文档
            元素节点：html文档中的html标签
            属性节点：元素的属性
            文本节点：html标签中的文本内容
        

        */

        /*
        浏览器已经为我们提供了文档节点，对象是这个对象的window属性
        可以再页面中直接使用.文档节点代表的就是整个页面

        */

        //获取到button对象
        var btn =  document.getElementById("btn");

        //修改按钮的文字
        btn.innerHTML = "我是你爹";

    </script>
</head>
<body>
    
    <button id="btn">我是一个按钮</button>
</body>
</html>